<template>
  <section id="usdt">
    <div v-if="!isDetail">
      <Base-UserMoneyInfo :type="type"></Base-UserMoneyInfo>
      <div class="list">
        <div class="title">
          <div>
            商家 (成单量 | 成交率)
          </div>
          <div>数量(USDT)</div>
          <div>限额 (CNY)</div>
          <div>价格 (CNY)</div>
          <div>付款方式</div>
          <div>操作</div>
        </div>
        <div class="item" v-for="(item,index) in lists" :key="index" :class="expand === index && 'active'">
          <div class="active">
            <img src="../../assets/image/icon_shangjia.png" alt="" width="23" height="23">
            <span>{{item.name}}</span>
            <span>（{{item.tran_number}} | {{item.tran_rate}}%）</span>
          </div>
          <div class="active">{{item.usdt}}</div>
          <div class="active">{{item.cny_min}}-{{item.cny_max}}</div>
          <div class="main active">{{item.exchange}}</div>
          <div class="active"><img src="../../assets/image/icon_yinlian.png" alt="" width="23" height="23"></div>
          <div class="active">
            <button @click="toExpand(item,index)">买入</button>
            <div class="triggle" v-if="expand === index"></div>
            <div class="triggle1" v-if="expand === index"></div>
          </div>
          <div class="expand" v-if="expand === index">
            <div class="priceNum" ref="priceNum">
              <div class="num">
                <input type="text" :placeholder="'最大可买数量'+item.usdt" v-model="num" @keyup="getFullname(false,index)" @input="clearNoNum(num,'num')">
                <span>USDT</span>
                <a href="javascript:;" @click="allPay(index)">全部买入</a>
              </div>
              <div class="price" ref="price">
                <input type="text" :placeholder="'最大可买额'+item.cny_max" v-model="price" @keyup="getFullname(true,index)" @input="clearNoNum(price,'price')">
                <span>CNY</span>
              </div>
            </div>
            <p class="notice">注：该订单需要您在15分钟内进行支付</p>
            <a href="javascript:;" class="comfrim_recharge" @click="submit(item)">确认支付</a>
            <ul>
              <li>1．充值免手续费</li>
              <li>2．什么是USDT？</li>
              <li>Tether USD（简称USDT）其本质上是 Tether公司基于区块链技术发行的一种去中心化的数字货币。其严格遵守1：1的准备金保证，即每一枚USDT代币背后都有1美元资金背书，所以USDT的价格是相对稳定的
              </li>
              <li>3．充值时间7＊24小时</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <Base-OrderDetail :orderData="orderData"></Base-OrderDetail>
    </div>
  </section>
</template>
<script>
import {_usdt_type_list,_usdt_add,_getUserInfo} from '../../axios/index.js'
export default {
  data() {
    return {
      show:true, // 余额是否显示
      expand:null, // 第几行展开
      isDetail:false,// 是否显示订单详情
      price:'',
      num:'',
      lists:[],
      type:1,// 充值为1，提现为2
      orderData:null,
    }
  },
  methods: {
    clearNoNum(val,type){ 
      val = val.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
      val = val.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
      if(val.indexOf(".")< 0 && val !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
          val = parseFloat(val); 
      }
      if (type == 'num') {
        this.num = val;
      } else {
        this.price = val;
      }
    },
    allPay(index){
         var self=this;
         self.price=self.lists[index].cny_max;
         self.num=(self.price/self.lists[index].exchange).toFixed(2);
    },
    /**
      展开行
     */
    toExpand(item,index) {
      let _self = this;
      _self.price = '';
      _self.num = '';
      if (_self.expand == index) {
        _self.expand = null;
      } else {
        _self.expand = index;
      }
    },
    async getdata(){
        var self=this;
        const res=await _usdt_type_list();
        if(res.data.code==200){
            self.lists=res.data.data;
        }
    },
    async submit(item) {
      var self = this;
      const res = await _usdt_add({
        money: self.price,
        type_id: item.type_id
      });
      if (res.data.code == 200) {
        self.orderData = res.data.data;
        self.isDetail = true;
      } else {
        self.$Message.error(res.data.msg);
      }
    },
    getFullname(bol,index){
      var self=this;
      if(bol){
        if(self.price==""){
          self.num="";
        }else{
         
           self.num=(self.price/self.lists[index].exchange).toFixed(2);
        }
        
      }else{
         if(self.num==""){
          self.price="";
         }else{
            self.price=(self.num*self.lists[index].exchange).toFixed(2);
         }
       
      }
    },
  },
  created() {
    //获取用户信息
    this.$store.dispatch("getUser");
    this.getdata();
    this.$emit('title','USDT直购');
  }
}
</script>
